<template>
  <div class="icon-text">
    <div class="icon">
      <img :src="imgUrl" />
    </div>
    <div class="context">
      <div class="num" :style="{ color: color }">{{ num }}</div>
      <div class="text">{{ title }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  imgUrl: {
    type: String,
  },
  num: {
    type: String,
  },
  title: {
    type: String,
  },
  color: {
    type: String,
    defalut: "#1eeeff",
  },
});
</script>
<style lang="scss">
.icon-text {
  display: flex;
  justify-items: baseline;
  .context {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .num {
    height: 26px;
    margin-bottom: 4px;
    font-size: 26px;
    font-family: Digital-7-Regular, Digital-7;
    font-weight: 400;
    // color: #1eeeff;
    line-height: 26px;
  }
  .text {
    white-space: nowrap;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
}
</style>
